<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			document.createElement("myHero")
		</script>
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
		</script>
		<![endif]-->
		<style>
			myHero{
				display: block;
				background-color: #dddddd;
				padding: 3.125rem;
				font-size: 1.875rem;
			}
		</style>
		<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
		</script>
	</head>
	<body>
		<video width="320" height="240" controls="controls">
			<source src="https://www.w3school.com.cn/i/movie.ogg type=" video/ogg"> <source src="https://www.w3school.com.cn/i/movie.mp4"
			 type="video/mp4">
			Your browser does not support the video tag.
		</video>
		<myHero>英雄自定义</myHero>
		<canvas id="lineCanvas" width="200" height="100" style="border:1px solid#c3c3c3;"></canvas>
		<canvas id="circleCanvas" width="200" height="100" style="border:1px solid#c3c3c3;"></canvas>
		<canvas id="gradientCanvas" width="200" height="100" style="border:1px solid#c3c3c3;"></canvas>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
			<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
		</svg>
		<a href="https://www.w3school.com.cn/i/song.mp3">Play Sound</a>
	
		<script>
			let canvas = document.getElementById("lineCanvas")
			let cxt = canvas.getContext("2d");
			cxt.moveTo(10, 10);
			cxt.lineTo(150, 50);
			cxt.lineTo(10, 50);
			cxt.stroke();

			let circleCanvas = document.getElementById("circleCanvas");
			let circle = circleCanvas.getContext("2d");
			circle.fillStyle = "#55aaff";
			circle.beginPath();
			circle.arc(70, 18, 15, 0, Math.PI * 2, true);
			circle.closePath();
			circle.fill();

			let gradientCanvas = document.getElementById("gradientCanvas");
			let gradient = gradientCanvas.getContext("2d");
			let grd = gradient.createLinearGradient(0, 0, 175, 50);
			grd.addColorStop(0, "#ff0000")
			grd.addColorStop(0.5, "#00ff00")
			grd.addColorStop(1, "#0000ff")
			gradient.fillStyle = grd;
			gradient.fillRect(0, 0, 175, 50);
		</script>
	</body>
</html>
